tweened() and spring()

Posted on 2023-03-27 by

In addition to tweened() there's also spring() . Let's see the differences between them!

Here is our starting point with no tweening or spring. The value changes instantly.

App.svelte Tweened.svelte TweenedObject.svelte TweenedInterpolate.svelte Spring.svelte

<script>
	import { writable } from "svelte/store";
	const value = writable(1);
</script>

<pre>{JSON.stringify($value, null, 2)}</pre>

<div class="buttons">

  
  <button
	on:click={() => {
    $value = 0;
	}}>0</button>
<button
on:click={() => {
  $value = 20;
}}>20</button>

</div>
<style>
	.buttons {
		margin: 18px 0;
	}
</style>

As you can see tweened() is great when we want a value to animate smoothly instead of switching instantly.